/**
 * 获取json数据
 * @returns {*}
 */
const getData = () => {
    return axios({
        url:"./json/data.json",
        method:"get"
    })
}

window.onload = function () {
    const canvas = document.getElementById('demo')
    const context = canvas.getContext("2d")
    canvas.width=9000;
    canvas.height=5000;
    const promise = getData()
    promise.then(res => {
        debugger
        const {Plate:{SegmentList},PartList} = res.data
        SegmentList.forEach((item) => {
            const {X1,Y1,X2,Y2,type} = item
            if (type === "line") {
                drawLine(context,X1,Y1,X2,Y2)
            }
        })

        PartList.forEach(item => {
            const {PartName,PartSN,contours} = item
            contours.forEach(obj => {
                const {IsOutsideContour,SegmentList} = obj
                SegmentList.forEach(single => {
                    const {X1,Y1,X2,Y2,Angle1,Angle2,clockwise,XC,YC,R,type} = single
                    switch (type) {
                        case "line":
                            drawLine(context,X1,Y1,X2,Y2);
                            break
                        case "circle":
                            drawCircle(context,XC,YC,R,Angle1,Angle2,clockwise);
                            break
                        case "arc":
                            drawSector(context,XC,YC,R,clockwise);
                            break
                    }
                })
            })
        })

    })
}
/**
 * 化线
 * @param context
 * @param startX
 * @param startY
 * @param endX
 * @param endY
 */
const drawLine = (context,startX,startY,endX,endY) => {
    context.beginPath();
    context.moveTo (startX,startY);       //设置起点状态
    context.lineTo (endX,endY);       //设置末端状态
    context.closePath();
    context.lineWidth = 1;            //设置线宽状态
    context.strokeStyle = "red";     //设置线的颜色状态

    context.stroke();                 //进行绘制
}

/**
 * 画扇形
 * @param context
 * @param xAxis
 * @param yAxis
 * @param radius
 * @param angleStart
 * @param angleEnd
 * @param counterclockwise 规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
 */
const drawSector = (context,xAxis,yAxis,radius,angleStart,angleEnd,counterclockwise) => {
    context.beginPath();
    context.arc(xAxis,yAxis,radius,angleStart*Math.PI,angleEnd*Math.PI,counterclockwise);
    context.stroke();
}

/**
 * 绘制圆
 * @param context
 * @param xAxis
 * @param yAxis
 * @param radius
 * @param counterclockwise
 */
const drawCircle = (context,xAxis,yAxis,radius,counterclockwise) => {
    context.beginPath();
    context.arc(xAxis,yAxis,radius,0,2*Math.PI,counterclockwise);
    context.stroke();
}
